<template>
	<view class="music-head" :style="{color:color}">
		<view class="music-head-icon" :class="{ 'music-head-iconblack':iconBlack }" v-if="icon">
			<text class="iconfont iconzuojiantou-copy" @tap="handleToBack"></text> | <text class="iconfont iconshouye" @tap="handleToHome()"></text>
		</view>
		{{title}}
	</view>
</template>

<script>
	export default {
		name:"musichead",
		props:['title','icon','color','iconBlack'],
		data() {
			return {
				// statusBarHeight:0+'px',
				// headIconTop:0+'px',
				// headIconHeight:0+'px',
				// headHeight:0+'px',
				// headLineHeight:0+'px'
			};
		},
		// created(){
		// 	uni.getSystemInfo({
		// 		success:info=>{
					
		//			:style="{height:headHeight, lineHeight:headLineHeight}"
		//			:style="{top:headIconTop,height:headIconHeight,lineHeight:headIconHeight}"
					
		// 			if(info.platform == 'mp_weixin' || info.platform == 'devtools'){
		// 				this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight']
		// 				console.log(this.statusBarHeight)
		// 				const custom = wx.getMenuButtonBoundingClientRect()
		// 				console.log(custom)
		// 				this.headIconTop = custom.top + 'px'
		// 				this.headIconHeight = custom.height + 'px'
		// 				this.headHeight = (custom.top + custom.height) +'px'
		// 				this.headLineHeight = (custom.top + custom.height * 2)  + 'px'
		// 				console.log(this.headLineHeight)
		// 			}else{
		// 				this.headHeight = 75 + 'px'
		// 				this.headLineHeight = 95 + 'px'
		// 				this.headIconTop = 33+'px'
		// 				this.headIconHeight = 30+'px'
		// 			}
					
		// 		}
		// 	})
			
		// },
		methods:{
			handleToBack(){
				uni.navigateBack()
			},
			handleToHome(){
				uni.navigateTo({
					url:"/pages/index/index"
				})
			}
		}
		
	}
</script>

<style lang="scss">
@import url("../../common/iconfont.css");

.music-head{
		width: 100%;
		height: 75px;
		line-height: 80px;
		font-size: 16px;
		text-align: center;
		position: relative;
		.music-head-icon{
			position: absolute;
			top:33px;
			left: 8px;
			width: 90px;
			height: 30px;
			line-height: 31px;
			border-radius: 15px;
			background: rgba(0, 0, 0, 0.4);
			display: flex;
			justify-content: space-evenly;
			&.music-head-iconblack{
				color: black;
				border:1px solid #eaeaea;
				background:white;
			}
		}
		
}
</style>